import React from "react";
import type { Action } from "antd-mobile/es/components/swipe-action";
import { SwipeAction } from "antd-mobile";
import "./CheckoutItem.scss";


interface CheckoutItemProps {
   checkout: any;
}

const CheckoutItem: React.FunctionComponent<CheckoutItemProps> = ({ checkout }) => {
   const rightActions: Action[] = [
      {
         key: "show",
         text: "详情",
         color: "warning",
      },
   ];

   /**
    * @description 滑动
    * */
   const onAction = async (action: Action, event: React.MouseEvent) => {
      if (action.key === "show") {

      }
   };
   return (
      <SwipeAction rightActions={rightActions} onAction={onAction}>
         <div className="checkout-tem">
            <div className="info">
               <div className="good-img">
                  <img src={checkout.goods_image} alt="" />
               </div>
               <div className="good-name">
                  <span className="ellipsis-multi">{checkout.goods_name}</span>
                  <span></span>
               </div>
               <div className="count">
                  <span>￥{checkout.total_price}</span>
                  <span>x{checkout.total_num}</span>
               </div>
            </div>
         </div>
      </SwipeAction>
   );
};

export default CheckoutItem;
